<template>
	<view class="information-wrap">
		<view class="flex-sb ">
			<text class="width " @click="showPicker = true">{{queryDate}} 切换</text>
			<text class="width title">最新影讯</text>
			<text class="width "></text>
		</view>
		<view class="cinema-info travel2 my_draw_canvas" id="travel2">
			<text>{{getDateText()}}</text>
			<text class="cinema-name">{{cinemaInfo.cinemaName}}</text>
			<text data-type="text">地址：{{cinemaInfo.cinemaAddress}}</text>
			<text>电话：{{cinemaInfo.cinemaPhone}}</text>
		</view>
		<image src="/static/image/info_bg.jpg" class="seat" mode="">
		</image>
		<view v-show="!isLoad">
			<view v-for="item in filmList" :key="item.FilmCode">
				<view class="film-item " v-if="item.session != 0">
					<view class="film-score" v-if='item.score'>
						<text class="score">{{item.score}}</text>
						<text>分</text>
					</view>
					<view class="film-info">
						<view>
							<image class="film-img" :src="item.Imageurl" mode=""></image>
						</view>
						<view>
							<text class="name">{{item.FilmName}}</text>
							<text class="type info">{{item.filmType || ''}}</text>
							<text class="info cast">{{getCaster(item.Cast) || ' '}}</text>
							<text class="info">{{item.PublishDate}}中国大陆上映/{{item.Duration}}分钟</text>
						</view>
					</view>
					<view class="session ">
						<view class="session-item" v-for="session in item.session" :key="session.PlanCode">
							<text class="date">{{getStartTime(session.StartTime)}}</text>
							<view class='screen-name'>{{getName(session.ScreenCode)}}</view>
							<text style="font-size: 24rpx;">{{getLanguage(session.Language)}}
								{{getType(session.ShowType)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-datetime-picker :minDate="minDate" :show="showPicker" mode="date" @confirm='confirmDate'
			closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import {
		queryFilms,
		querySessionStatus,
		getCinemaInfo,
		queryCinema
	} from '../../common/http/api';
	import moment from 'moment'
	import {
		currentDate,
		getWeek,
		getDate
	} from '../../common/timer.js';
	export default {
		data() {
			return {
				queryDate: currentDate(),
				minDate: new Date().getTime(),
				filmList: [],
				isLoad: true,
				seatSrc: '/static/image/info_bg.jpg',
				cinemaInfo: {},
				showPicker: false,
			};
		},
		onLoad() {
			this.queryCinema()
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})

			this.getFilm();
			uni.showLoading({
				title: "加载中..."
			})
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
			getCinemaInfo().then(res => {
				this.cinemaInfo = res;
			})

		},
		methods: {

			confirmDate(e) {
				uni.showLoading({
					title: "加载中..."
				})
				this.queryDate = moment(e.value).format('YYYY-MM-DD')
				this.showPicker = false
			},
			getFilm() {
				queryFilms({
					StartDate: this.queryDate,
					EndDate: this.queryDate
				}).then((res) => {
					const {
						data,
						resultCode,
						msg
					} = res
					if (resultCode === '000') {
						this.filmList = data.Films;
						this.getSession();
					} else {
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			getSession() {
				querySessionStatus({
					StartDate: this.queryDate,
					EndDate: this.queryDate
				}).then(res => {
					const {
						data,
						code,
						msg
					} = res
					if (code === "SUCCESS") {
						const currentDateSession = data[this.queryDate];
						let list = this.filmList.slice();
						currentDateSession.sort((a, b) => {
							return moment(a.StartTime).valueOf() - moment(b.StartTime).valueOf()
						})
						list.map(item => {
							item.session = []
							currentDateSession.map(_item => {
								if (item.FilmCode == _item.FilmCode) {
									item.session.push(_item)
								}
							})
						})
						this.filmList = list;
						this.handleFilms()
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			handleFilms() {
				this.filmList.sort((a, b) => {
					return b.session.length - a.session.length
				})
				uni.hideLoading();
				this.isLoad = false;
			},
			queryCinema() {
				queryCinema().then(res => {
					const {
						data
					} = res
					this.code = data.CinemaCode
					this.$store.commit('setScreens', data.Screens)
				})
			},

		},
		computed: {
			getLanguage() {
				return text => text == '普通话' ? '国语' : text
			},
			getStartTime() {
				return time => time.substring(11, 16)
			},
			getType() {
				return type => type == '1' ? '2D' : '3D'
			},
			getDateText() {
				return () => {
					const week = getWeek(this.queryDate)
					let date = this.queryDate.replace('-', '年').replace('-', '月') + '日'
					return `${date}/周${week}·影讯`
				}
			},
			getCaster() {
				return cast => cast.replace(/\//g, '、')
			},
			getName() {
				return code => {
					const {
						screens
					} = this.$store.state
					const index = screens.find(item => item.ScreenCode === code)
					return index.ScreenName
				}
			},
		},
		watch: {
			queryDate() {
				this.getFilm()
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/information.css';

	.information-wrap {
		background-color: #d21f3d;
		// height: 100%;
		background-attachment: fixed;
		padding-top: 10px;
		padding-bottom: 30px;
		overflow: hidden;

		.flex-sb {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

		}

		.cinema-info {
			width: 100vw;
			color: #fde8cd;
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cinema-name {
				font-size: 46rpx;
				margin: 10rpx 0;
			}
		}

		.width {
			width: 120px;
			text-align: center;
			color: #fff;
			font-size: 14px;
		}

		.title {
			font-size: 20px;
		}

		.seat {
			width: 100vw;
			height: 75px;
			display: block;
			margin-top: 15px;
		}

		.film-item {
			width: calc(100vw - 50px);
			margin: 0 auto 10px auto;
			background-color: #fff;
			padding: 10px;
			border-radius: 10px;
			position: relative;

			.film-score {
				position: absolute;
				right: 10px;
				color: #872e0e;
				width: 120rpx;
				height: 70rpx;
				top: -20rpx;
				padding-top: 20rpx;
				text-align: center;
				font-size: 26rpx;

				.score {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.film-info {
				display: flex;

				.film-img {
					width: 90px;
					height: 120px;
					border-radius: 5px;
					margin-right: 10px;
				}

				.name {
					font-size: 16px;
				}

				.info {
					font-size: 14px;
					color: #999;
					display: block;
				}

				.type {
					margin-top: 40px;
				}

				.cast {
					width: 430rpx;
					overflow: hidden;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.session {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;

				.session-item {
					margin: 0 3px 5px 3px;
					text-align: center;
					background-color: #fefdf8;
					border: 1px solid #f5f1e6;
					font-size: 14px;
					padding: 5px;
					// width: 63px;
					width: 125rpx;
					// height: 105rpx;

					.date {

						font-weight: bold;
						display: block;
					}

					.screen-name {
						width: 125rpx;
						overflow: hidden;
						/* 确保溢出的内容会被隐藏 */
						font-size: 24rpx;
						white-space: nowrap;
						/* 确保文本在一行内显示，不换行 */
						text-overflow: ellipsis;
						/* 使用省略号表示文本溢出 */
					}
				}
			}
		}

		.date-picker {
			position: fixed;
			bottom: 0;
			width: 100vw;
		}
	}
</style>